<template>
  <div class="news-info-container">
    <div class="news-title">
      <h1>{{news.title}}</h1>
    </div>
    <div class="time-clickCount">
      <span>发表时间:{{news.addTime | dateFormat}}</span>
      <span>点击：{{news.click}}次</span>
    </div>
    <hr>
    <div class="news-content" v-html="news.content"></div>
    <my-comment :id="id" :type="2"></my-comment>
  </div>
</template>
<style lang="less">
.news-info-container {
  .news-title {
    h1 {
      font-size: 18px;
      color: red;
      text-align: center;
    }
  }
  .time-clickCount {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
}
.news-content {
  img {
    max-width: 100% !important;
  }
}
</style>
<script>
import Comment from "./commonComp/Comment.vue";
import Interface from "../interface.js";
export default {
  data() {
    return {
      id: this.$route.params.id,
      news: {}
    };
  },
  created() {
    // 当vm实例创建完成时，ajax请求新闻详情
    this.axios
      .get(Interface.getnewBaseUrl + this.id)
      .then(data => {
        if (data.data.status == true) {
          console.log(data.data.message[0]);
          this.news = data.data.message[0];
        } else {
          alert("获取数据异常");
        }
      })
      .catch(err => {
        alert("ajax发生异常");
      });
  },
  components: {
    "my-comment": Comment
  }
};
</script>
